<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<uni-header></uni-header>
		<!-- #endif -->

		<view class="pay-box com-box">
			<text class="icon icon-benefits"></text>
			<text class="tit">支付成功</text>

			<view class="btn-group">
				<navigator url="/pages/order/list?state=0" open-type="redirect" class="mix-btn">查看订单</navigator>
				<navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
			</view>
		</view>

		<!-- #ifdef H5 -->
		<uni-footer></uni-footer>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniHeader from '@/components/h5/uni-header.vue'
	import uniFooter from '@/components/h5/uni-footer.vue'
	export default {
		components: {
			uniHeader,
			uniFooter
		},
		data() {
			return {}
		},
		methods: {}
	}
</script>

<style lang='scss'>
	.pay-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.icon-benefits {
		font-size: 160upx;
		color: $base-color-page;
		margin-top: 100upx;
	}

	.tit {
		font-size: 36upx;
		color: #303133;
	}

	.btn-group {
		padding-top: 100upx;
	}

	.mix-btn {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 600upx;
		height: 80upx;
		font-size: $base-font-lg;
		color: #fff;
		background-color: $base-color-page;
		border-radius: 10upx;

		&.hollow {
			background: #fff;
			color: #303133;
			border: 1upx solid #ccc;
		}
	}

	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.pay-box {
			margin: 20px auto;
			padding: 50px 0;
			background-color: #fff;
		}

		.icon-benefits {
			font-size: 100px;
			color: $base-color-pc;
			margin-top: 0;
		}

		.tit {
			font-size: 24px;
		}

		.btn-group {
			padding-top: 50px;
		}

		.mix-btn {
			margin-top: 20px;
			width: 300px;
			height: 50px;
			font-size: 16px;
			line-height: 50px;
			background-color: $base-color-pc;
			border-radius: 0;

			&.hollow {
				line-height: 48px;
				border: 1px solid #ccc;
			}
		}

	}

	/* #endif */
</style>
